<template>
  <div class="news-box">
    <mheader />
    <div class="scroll-container" ref="containerScroll" @scroll.passive="scrollEvent">
      <div :style="spaceStyle">
        <div v-for="(item, index) in showList" :key="index">
        <a class="one-new" :href="'/#/article/'+item.id">
          <div class="new-left">
            <h3>{{item.id}}.{{item.title}}</h3>
            <div>
              <p>
                <i class="fa fa-eye" />
                <span>{{item.reads}}</span>
                <i class="fa fa-heart" />
                <span>{{item.loves}}</span>
              </p>
              <h4>{{item.date}}</h4>
            </div>
          </div>
          <div class="new-right">
            <img :src="imgList[item.image]" alt="PIC" />
          </div>
        </a>
      </div>
      </div>
      <div class="loading" v-if="loadingStatus">
          {{loadingMsg}}
      </div>
    </div>
  </div>
</template>

<script>
import mheader from "../components/header.vue";
import imgList from "../common/newsImgs"
export default {
  data(){
      return {
        //请求的数据
        newsList:[],
        //准备好的静态文件
        imgList,
        //单条新闻高度
        oneItemHeight:100,
        //屏幕容积
        containerSize:0,
        startIndex:0,
        loadingStatus:true,
        loadingMsg:'小二加载中'
      }
  },
  components: {
    mheader,
  },
  computed:{
    endIndex(){
      let endIndex = this.startIndex + this.containerSize;
      if(!this.newsList[endIndex]){
        endIndex = this.newsList.length;
      }
      return endIndex;
    },
    showList(){
      return this.newsList.slice(this.startIndex,this.endIndex);
    },
    spaceStyle(){
      return{
        paddingTop:(this.startIndex*this.oneItemHeight)+'px',
        paddingBottom:(this.newsList.length-this.endIndex)*this.oneItemHeight + 'px'
      }
    }

  },
  created(){
    this.getData(10000);
  },
  mounted(){
    this.onResize();
    window.onresize = this.onResize;
    window.onorientationchange = this.onResize;
  },
  methods:{
    onResize(){
      this.containerSize = ~~((this.$refs.containerScroll.offsetHeight-60)/this.oneItemHeight)+2;
    },
    scrollEvent(){
      this.startIndex = ~~(this.$refs.containerScroll.scrollTop / this.oneItemHeight)
    },
    async getData(num){
      this.loadingStatus = true;
      const newsList = await this.$axios.get("/data?num="+num);
      this.newsList = newsList.data.list
      this.loadingStatus = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.news-box {
  width: 100%;
  height: 100%;
  max-width: 800px;
  margin-top: 60px;
  .scroll-container {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    .one-new {
      text-decoration: none;
      display: block;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      border-bottom: 1px solid #ddd;
      padding: 14px 2% 5px;
      .new-left {
        height: 80px;
        width: 70%;
        position: relative;
        h3 {
          padding: 0;
          margin: 0;
          font-size: 16px;
          text-align: justify;
          color: #555;
        }
        div {
          position: absolute;
          width: 100%;
          bottom: 10px;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;
          p {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
            i {
              font-size: 12px;
              color: #555;
              margin-left: 3px;
              margin-right: 3px;
            }
            span {
              font-size: 12px;
              color: #555;
              margin-right: 8px;
            }
          }
          h4 {
            font-size: 12px;
            color: #888;
          }
        }
      }
      .new-right {
        margin-left: 10px;
        img {
          height: 68px;
        }
      }
    }
    .msg h2 {
      font-size: 18px;
      text-align: center;
      color: #666;
      padding-top: 58px;
    }
    .loading{
      margin-top: 200px;
      font-size: 21px;
      text-align: center;
    }
  }
}
</style>
